<template>
  <div class="pagination-demo">
    <!-- 分页信息展示 -->
    <div class="pagination-info">
      显示 {{ (value.page - 1) * value.size + 1 }}-{{
        value.page * value.size > value.total
          ? value.total
          : value.page * value.size
      }}
      条，共 {{ value.total }} 条
    </div>
    <!-- 分页组件 -->
    <el-pagination
      :page-size="value.size"
      :current-page="value.page"
      background
      layout="prev, pager, next"
      :total="value.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, onMounted } from "vue";

import { useStore } from '@/store';
const store = useStore();
const recordStore = store.record;

const props = defineProps({
  value: {
    type: Object,
    default: () => ({
      page: 1,
      size: 5,
      total: 0,
    }),
  },
  small: {
    type: Boolean,
    default: false,
  },
  refresh: {
    type: Function,
    default: () => {},
  }
});

const emit = defineEmits(["update:value"]);

// 处理页码变化
// 修改handleCurrentChange方法
const handleCurrentChange = (val) => {
  // 不要直接修改props，创建新对象
  const newValue = {
    ...props.value,
    page: val
  };
  emit('update:value', newValue);
  
  // 根据页面标题决定使用哪种分页方法
  if (props.value.title === '个人经历' && props.value.cz) {
    recordStore.setListPagePaginatedRecords(val, props.value.size);
  } else {
    recordStore.setPaginatedRecords(val, props.value.size);
  }
};

// 修改handleSizeChange方法
const handleSizeChange = (val) => {
  const newValue = {
    ...props.value,
    size: val,
    page: 1 // 页码重置为1
  };
  emit('update:value', newValue);
  
  // 根据页面标题决定使用哪种分页方法
  if (props.value.title === '个人经历' && props.value.cz) {
    recordStore.setListPagePaginatedRecords(1, val);
  } else {
    recordStore.setPaginatedRecords(1, val);
  }
};
</script>

<style lang="scss">
.pagination-demo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}
.pagination-info {
  margin-right: 10px;
  display: inline-block;
  color: #4e5969;
  font-size: 14px;
  font-family: sans-serif;
}
</style>
